<template>
  <view class="health-address">
    <view class="w-686rpx ml-32rpx mt-60rpx">
      <view class="b_title">请完善地址</view>
      <view class="b_wrap mt-48rpx">
        <view class="px-24rpx">
          <view class="py-26rpx flex flex-row items-center justify-between">
            <view class="b_left">所在地区</view>
            <uni-data-picker
              :clear-icon="false"
              v-model="formData.city"
              ellipsis
              :localdata="cityList"
              popup-title="所在地区"
              @change="onchange"
            ></uni-data-picker>
          </view>
        </view>
      </view>
      <view class="b_wrap mt-24rpx">
        <view class="px-24rpx">
          <view class="py-42rpx flex flex-row justify-between">
            <view class="b_left"> 详细地址 </view>
            <view>
              <textarea
                class="b_textarea py-4rpx"
                placeholder-style="color:#CBCBCB"
                v-model="formData.address"
                placeholder="请输入具体地址"
              />
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
  <BottomButton @clickBtn="saveFile">提交</BottomButton>
</template>
<script setup name="healthAddress">
import { ref } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import { cityJSON } from "@/patientPages/healthCard/static/constant";
import healthCardUtil from "@/utils/healthCard/index";
import healthCard from "../../healthCard/static/ElectronicHealthCard";

import { usePatientStore } from "@/store/patient";

const patientStore = usePatientStore();

const patientId = ref("");
const healthCardInfo = ref(null);
const formData = ref({
  city: [
    { text: "四川省", value: "510000" },
    { text: "泸州市", value: "510500" },
    { text: "江阳区", value: "510502" },
  ],
  address: "", // 详细地址
});
const cityList = cityJSON;
onLoad((options) => {
  patientId.value = options.patientId || "";
  healthCardInfo.value = healthCard.getHealthCardInfo();
});

const onchange = (e) => {
  formData.value.city = e.detail.value;
};

const saveFile = async () => {
  if (!formData.value.address) {
    healthCardUtil.toast("请输入详细地址");
    return;
  }
  try {
    healthCardUtil.showLoad(`${patientId.value ? "升级" : "加载"}中`);
    const param = {
      ...healthCardInfo.value,
      address: JSON.stringify({
        city: formData.value.city,
        address: formData.value.address,
      }),
    };
    if (patientId.value) {
      await healthCard.updateByHealthCard(param, patientId.value);
    } else {
      await healthCard.createByHealthCard(param);
    }
    patientStore.updatePatient();
    healthCardUtil.hideLoad();
    healthCardUtil.toast(`${patientId.value ? "升级" : "添加"}成功`, () => {
      uni.navigateBack();
    });
  } catch (error) {
    console.log(error, "结果");
    healthCardUtil.hideLoad(1500);
  }
};
</script>
<style lang="scss">
.b_title {
  font-size: 34rpx;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #333333;
  line-height: 48rpx;
}
.b_wrap {
  width: 100%;
  background: #ffffff;
  border-radius: 16rpx;
  .b_left {
    flex-shrink: 0;
    font-size: 32rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #333333;
    line-height: 44rpx;
  }
  .b_input {
    width: 358rpx;
    height: 42rpx;
    line-height: 42rpx;
  }
  .b_textarea {
    width: 482rpx;
    height: 84rpx;
  }
}
.uni-data-tree {
  max-width: 400rpx;
  .placeholder {
    font-size: 34rpx !important;
    color: #cbcbcb !important;
  }
  .selected-item {
    font-size: 32rpx !important;
    color: #333333 !important;
    font-weight: 500;
  }
}
</style>
